/*
*@description: 元数据
*@author: 作者
*@date: 2023-03-05 13:11:02
*@email: 邮箱
*/

<!--  -->
<template>
    <div class=''>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>元数据</span>
            </div>
            <el-row class="cardBox">
                <div class="cardItem" v-for="(item,index) in  dataList " :key="item.id">
                    <el-card :body-style="{ padding: '0px' }">
                        <img style="width:100%;" v-bind:src="item.imgUrl" class="image">
                        <div style="padding: 14px;">
                            <span>{{item.name}}</span>
                            <div class="bottom clearfix">
                                <time class="time">{{ item.time }}</time>
                                <el-button type="text" class="button" @click="seeDetail(item)">查看文件</el-button>
                            </div>
                        </div>
                    </el-card>
                </div>
            </el-row>
        </el-card>
    </div>
</template>
<script>
    export default {
        components: {},
        data() {
            return {
                dataList: [{
                        name: '松辽盆地东南隆起区',
                        time: '2023-3-06 10:22',
                        id: 1,
                        imgUrl: require('../../assets/img/1.png')
                    },
                    {
                        name: '松辽盆地西部斜坡区',
                        time: '2023-1-10 18:29',
                        id: 2,
                        imgUrl: require('../../assets/img/2.png')
                    }, {
                        name: '松辽盆地中央坳陷区',
                        time: '2023-1-1 13:22',
                        id: 3,
                        imgUrl: require('../../assets/img/3.png')
                    },
                ],
                currentDate: new Date()
            };
        },
        computed: {},
        created() {

        },
        methods: {
            //查看文件详情
            seeDetail(item) {
                this.$router.push({ path: '/dataSourceDetail', query: { id: item.id,name:item.name } })
            }
        },
    }
</script>
<style scoped>
    .cardBox {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .cardItem {
        width: 15%;
        margin-bottom: 15px;
        margin-left: 20px;
    }

    .cardItem img {
        object-fit: cover;
    }

    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 100%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
</style>
